<template>
    <div class="contenter dayReport1">
        <div class="center fontSize16 mt20 mb20">
            <span class="fontSize14 colorOrange"> < {{parmInfo.brandName}} > </span>
            <span class="fontbold">
                {{parmInfo.activeNav==3?`${parmInfo.year}年`:''}}
                {{parmInfo.activeNav==2?`${parmInfo.year}-${parmInfo.month}`:''}}
                {{parmInfo.activeNav==1?`${parmInfo.day}`:''}}
                {{parmInfo.areaId==20?'线上':'门店'}}报表</span>
        </div>
        <!-- <div class="mb20" style="position: sticky;top: 0;">
            <van-dropdown-menu active-color="#4873c1">
                <van-dropdown-item v-model="typeVal" @change='getType' :options="option" ref="item">
                </van-dropdown-item>
            </van-dropdown-menu>
        </div> -->
        <div class="mainContent nowrap contentlayout wd100 fontSize0 " v-if="reportList.length>0">
            <!--销售额-->
            <!-- <div class="flex alignCenter  subTitle colorfff fontSize12 flexCenter" style="display:block" v-if="typeVal==1">
                <div class="disInline w20 center tableTitleBgcolor">区域名称</div>
                <div class="disInline w20 center tableTitleBgcolor" v-if="parmInfo.areaId==20" @click="goSort(gmvSort,'gmv')">gmv(元)</div>
                <div class="disInline w20 center tableTitleBgcolor" @click="goSort(numSort,'num')">销售额(元)</div>
                <div class="disInline w20 center tableTitleBgcolor" @click="goSort(pastSaleSort,'pastSale')">同期销售额(元)</div>
                <div class="disInline w20 center tableTitleBgcolor" @click="goSort(ratioSort,'ratio')">同期提升比</div>
                <div class="disInline w20 center tableTitleBgcolor" v-if="parmInfo.areaId!=20"
                 @click="goSort(presaleSort,'presale')">预售(元)</div>
            </div>
             <div class="reportListContent fontSize12 disInline" v-if="typeVal==1">
                <div class="flex flexBetween flexCenter" v-for="(item,index) in reportList" :key="index">
                    <div class="w20 borderGray regionName flex flexCenter alignCenter fontSize13 center">{{item.name}}</div>
                    <div class="w20 borderGray flex flexCenter alignCenter" v-if="parmInfo.areaId==20">{{item.gmv}}</div>
                    <div class="w20 borderGray flex flexCenter alignCenter">{{item.num}}</div>
                    <div class="w20 borderGray flex flexCenter alignCenter">{{item.pastSale}}</div>
                    <div class="w20 borderGray flex flexCenter alignCenter">
                        <span :class="{'colorGreen':item.ratio<0,'colorRed':item.ratio>0}">{{item.ratio==''?item.ratio:`${item.ratio}%`}}</span>
                        <van-icon name="down" v-if="item.ratio!=0" :class="{'colorGreen':item.ratio<0,'colorRed rotate180':item.ratio>0}"/>
                    </div>
                    <div class="w20 borderGray flex flexCenter alignCenter" v-if="parmInfo.areaId!=20">{{item.presale}}</div>
                </div>
             </div> -->
             <div class="flex alignCenter  subTitle colorfff fontSize12 flexCenter" style="display:block" v-if="typeVal==1">
                <div class="disInline w20 center tableTitleBgcolor">店铺名称</div>
                <div class="disInline w20 center tableTitleBgcolor" @click="goSort(numSort,'num')">{{parmInfo.areaId==20?'净销额':'销售额'}}(元)</div>
                <div class="disInline w20 center tableTitleBgcolor" v-if="parmInfo.areaId==20" @click="goSort(gmvSort,'gmv')">gmv(元)</div>
                
                <div class="disInline w20 center tableTitleBgcolor" @click="goSort(pastSaleSort,'pastSale')">同期销售额(元)</div>
                <div class="disInline w20 center tableTitleBgcolor" @click="goSort(ratioSort,'ratio')">同期提升比</div>
                <div class="disInline w20 center tableTitleBgcolor" v-if="parmInfo.areaId!=20"
                 @click="goSort(presaleSort,'presale')">预售(元)</div>
            </div>
             <div class="reportListContent fontSize12 disInline" v-if="typeVal==1">
                <div class="flex flexBetween flexCenter" v-for="(item,index) in reportList" :key="index">
                    <div class="w20 borderGray regionName flex flexCenter alignCenter fontSize13 center">{{item.name}}</div>
                    <div class="w20 borderGray flex flexCenter alignCenter">{{item.num}}</div>
                    <div class="w20 borderGray flex flexCenter alignCenter" v-if="parmInfo.areaId==20">{{item.gmv}}</div>
                    
                    <div class="w20 borderGray flex flexCenter alignCenter">{{item.pastSale}}</div>
                    <div class="w20 borderGray flex flexCenter alignCenter">
                        <span :class="{'colorGreen':item.ratio<0,'colorRed':item.ratio>0}">{{item.ratio==''?item.ratio:`${item.ratio}%`}}</span>
                        <van-icon name="down" v-if="item.ratio!=0" :class="{'colorGreen':item.ratio<0,'colorRed rotate180':item.ratio>0}"/>
                    </div>
                    <div class="w20 borderGray flex flexCenter alignCenter" v-if="parmInfo.areaId!=20">{{item.presale}}</div>
                </div>
             </div>
        </div>
    </div>
</template> 
<script>
import { Toast} from 'vant'
import {GetQueryStr} from '@/common/common.js'
export default{
    name:'storeReport',
    data(){
        return{
            typeVal:1,
            option: [
                { text: '销售额', value: 1 },
                { text: 'vip', value: 2 },
            ],
            parmInfo:{},
            reportList:[],
            isLoading:true,

            gmvSort:1,
            numSort:1,
            ratioSort:1,
            shopNumSort:1,
            shopRatioSort:1,
            presaleSort:1,
            pastSaleSort:1
        }
    },
    created(){
        let parm=this.$route.query
        console.log('parm',parm)
        this.parmInfo=parm
        this.getStoreList(1,'num')
    },
    methods:{
        getStoreList(type,name){
            let obj={
               year:this.parmInfo.year,
               month:this.parmInfo.month,
               day:this.parmInfo.day,
               brandId:this.parmInfo.brandId,
            //    channelId:this.parmInfo.channelId,
               areaId:this.parmInfo.areaId,
               sort:type,//1降序 2升
               sortField:name, //排序字段：num 销售，ratio 同期比，shopNum 同店销售，shopRatio 同店同期    gmv订单销售，presale 预售
               channelId:this.parmInfo.channelId
            }

            this.gmvSort==1?this.gmvSort=2:this.gmvSort=1
            this.numSort==1?this.numSort=2:this.numSort=1
            this.ratioSort==1?this.ratioSort=2:this.ratioSort=1
            this.shopNumSort==1?this.shopNumSort=2:this.shopNumSort=1
            this.shopRatioSort==1?this.shopRatioSort=2:this.shopRatioSort=1
            this.presaleSort==1?this.presaleSort=2:this.presaleSort=1
             this.pastSaleSort==1?this.pastSaleSort=2:this.pastSaleSort=1
            if(this.isLoading){
                Toast.loading({
                    message: '加载中',
                    forbidClick: true,
                    duration:0
                })
            }
            
            console.log('提交的参数',obj)
            this.$apiRequest.getStoreList(obj).then(res=>{
                console.log('门店列表',res)
                Toast.clear()
                if(res.code==200){
                    this.reportList=res.data
                }

            })
        },
        getType(e){
            this.typeVal=e
        },
        goSort(type,name){
            this.isLoading=false
            this.getStoreList(type,name)
        }
    }

}
</script>
<style >
.dayReport1 .van-overlay{
    background-color: rgba(0, 0, 0, 0.9)
}
</style>
<style lang='less' scoped>
.w14{
    // width: 13%;
    width: 1.4rem;
    padding: 0.14rem 0;
    text-align: center;
    // height: 0.9rem;
    // line-height: 0.6rem;
    // border: 1px #777 solid;
}
.w1{width: 1rem;}
.w20{
    width: 2.2rem;
    padding: 0.2rem 0.04rem;
    
}
.w24{
    width: 2rem !important;
    padding: 0.14rem 0;
    text-align: center;
}
.w17{
    width: 1.7rem;
}
.reportListContent{
    // max-height:6rem;
    // overflow-y: scroll;
    .regionName{
        background-color: #f1f1f1;
        white-space: pre-wrap
    }
}
.contenter{
    width: 92%;
    margin: 0 auto;
    .title{
        background-color: rgba(83,114,192,0.1);
        padding: 0.1rem 0;
    }
    .mainContent{
        // padding-bottom: 0.8rem;
    }
    .subTitle{
        // height: 1rem;
        // background-color: #85aaee;
        // display: block;
        // padding: 0.1rem 0;
        .w14{
            height: 1rem;
            // line-height: 0.76rem;
        }
    }
    .Subtotal{
        background: #fdebe8;
        position: fixed;
        width: 92%;
        bottom: 0.48rem;
        left: 50%;
        z-index: 1;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
}
.reportListContent {
    max-height: 12rem;
    overflow-y: auto;
}
.contentlayout{
    overflow-x: auto;
    display: block;
    margin-top: 0.8rem;
}
.borderGray{
    // background-color: #85aaee;
    // padding: 0.1rem 0;
    border:1px #eee solid
}
.borderBlue{
    border:1px #83a6e7 solid
}
.rotate180{transform: rotate(180deg);}
.mainTable{
    overflow:auto;
    height: 9rem;
    td,th{
        // border:1px solid gray;
        width:100px;
        height:40px;
        border:1px #eee solid;
        text-align: center;
    }
    th{
        position: relative;
        z-index: 999;
    }
    table{
        table-layout:fixed;
        width:900px;
    }
    td:first-child,th:first-child{
        position:sticky;
        left:0;
        z-index:1;
        // background-color:lightpink;
    }
    thead tr th{
        position:sticky;
        top:0;
    }
    td:first-child{
        background-color: #f1f1f1;
        z-index: 1;
    }
    th:first-child{
        z-index:999999;
        // background-color:lightblue;
    }
}
</style>

